<template>
  <div class="dashboard-editor-container chart-wrapper">
    <div :class="Name ? 'wenzi' : 'wenzi2'">
      {{ Name }}
    </div>
    <div :class="className" :style="{ height: height, width: width }"></div>
    <div class="beizhu">
      {{ Name2 }}
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    Name: {
      type: String,
      default: "",
    },
    Name2: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "200px",
    },
    color:{
      type: String,
      default: "",
    },
    subtext:{
      type: String,
      default: "12",
    }
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      let option = {
        tooltip: {},
        color: [this.color, "#d0d0d0"],
        title: {
          subtext: this.subtext,
          subtextStyle: {
            fontSize: 40,
            color: ["#000000"],
            fontWeight: 200,
          },
          x: "center",
          y: "center",
        },
        // grid: {
        //   bottom: 150,
        //   left: 100,
        //   right: '10%'
        // },
        series: [
          // 主要展示层的
          {
            radius: ["45%", "55%"],
            center: ["50%", "50%"],
            type: "pie",
            label: {
              normal: {
                // show: true,
                // formatter: '{b}{d}%',
                textStyle: {
                  fontSize: 15,
                },
                // position: 'outside'
              },
              // emphasis: {
              //   show: true
              // }
            },
            labelLine: {
              // normal: {
              show: false,
              //   length: 5,
              //   length2: 25
              // },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                // name: '完成数',
                value: 4,
              },
              {
                // name: '未检查数',
                value: 18,
              },
            ],
          },
        ],
      };

      this.chart = echarts.init(this.$el.querySelector(".chart"), "macarons");

      this.chart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.wenzi2 {
  height: 50px;
  line-height: 50px;
  padding: 20px 30px 0;
}
.wenzi {
  height: 50px;
  line-height: 50px;
  padding: 20px 30px 0;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 20px;
    background: #3e8dca;
    left: 15px;
    top: 35px;
    border-radius: 2px;
  }
}
.chart-wrapper {
  position: relative;
}
.beizhu {
  position: absolute;
  left: 85px;
  top: 220px;
}
</style>
